import { useCallback } from "react";
import {
  ReactFlow,
  addEdge,
  useNodesState,
  useEdgesState,
} from "@xyflow/react";
import CustomEdge from "../../components/CustomEdge";
import SineEdge from "../../edges/SineEdge";
import StepEdge from "../../edges/StepEdge";
import "@xyflow/react/dist/style.css";

const initialNodes = [
  { id: "a", position: { x: 0, y: 0 }, data: { label: "Node A" } },
  { id: "b", position: { x: 200, y: 100 }, data: { label: "Node B" } },
  { id: "c", position: { x: 0, y: 200 }, data: { label: "Node C" } },
  { id: "d", position: { x: 200, y: 300 }, data: { label: "Node D" } },
];

// const initialEdges = [
//   { id: "a->b", type: "custom-edge", source: "a", target: "b" },
//   { id: "b->c", type: "custom-edge", source: "b", target: "c" },
// ];
const initialEdges = [
  { id: "a->b", type: "step", source: "a", target: "b", zIndex: 100 },
  { id: "c->d", type: "sine", source: "c", target: "d", zIndex: 100 },
];

const edgeTypes = {
  "custom-edge": CustomEdge,
  step: StepEdge,
  sine: SineEdge,
};

function Flow() {
  const [nodes, , onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback(
    (connection) => {
      const edge = {
        ...connection,
        type: "default", // 默认是simplebezier "straight" "step" "smoothstep" "simplebezier"
        zIndex: 1001,
        interactionWidth: 10,
      };
      setEdges((eds) => addEdge(edge, eds));
    },
    [setEdges]
  );
  return (
    <ReactFlow
      colorMode="dark"
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      edgeTypes={edgeTypes}
      fitView
    />
  );
}

export default Flow;
